<template>
  <div>
    <Item />
    <h1 ref="title">App</h1>
     <!-- 在{{}}插值语法中使用数据的时候，可以在数据后边添加一个管道符| 管道符后跟上一个过滤器 -->
    <h2>App的体重是{{ weight | percentage }}</h2>
    <h2>App的身高是{{ height | percentage }}</h2>
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {
      weight: 156.2337,
      height: 181.56554,
    };
  },
  /* 
    局部注册过滤器的时候，使用filters配置项注册
    过滤器是一个函数，函数接收第一个参数就是当前被过滤的值，过滤器函数return的值就是最后过滤出来的值
  */
  filters: {
    percentage(data) {
      return data.toFixed(3);
    },
  },
};
</script>

<style scoped></style>
